<template>
    <div class="container scopClass">
        <h3>空码管理</h3>
            <el-row style="margin:20px 0;">
                <el-button type="primary"  style="float:right; margin-right: 10px" @click="apply">申请溯源码</el-button>
            </el-row>
            <el-table
                :data="tableData1"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="boxNum" sortable label="追溯码数量"></el-table-column>
                <el-table-column prop="createtime" sortable label="申请时间"></el-table-column>
                <el-table-column prop="downloaded" sortable label="状态">
                    <template slot-scope="scope">
                        <div v-if="!scope.row.downloaded" >
                            <div style="height:10px;width:10px;border-radius:10px;background:red;display:inline-block;"></div> 未下载
                        </div>
                        <div v-if="scope.row.downloaded">
                            <div style="height:10px;width:10px;border-radius:10px;background:green;display:inline-block;"></div> 已下载
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="materialCode" sortable label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">下载追溯码</el-button>
                        <el-button v-if="scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">再次下载追溯码</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>

            <el-dialog title="申请追溯码" customClass="customWidth" :visible.sync="dialogFormVisible">
            	<el-form :model="form" label-width="120px">
            		<el-form-item label="追溯码数量">
            			<el-input placeholder="请输入内容"  v-model="boxNum" style="width:200px"></el-input>
            		</el-form-item>
                    <el-form-item label="批次号">
            			<el-input placeholder="请输入内容"  v-model="subpackageBatch" style="width:200px"></el-input>
            		</el-form-item>
            	</el-form>
            	<div slot="footer" class="dialog-footer">
            		<el-button @click="close">取 消</el-button>
            		<el-button type="primary" @click="save">确 定</el-button>
            	</div>
            </el-dialog>
    </div>
</template>

<script>
	import { sub_findByList,sub_findPrintMsg,sub_offLinePrint,sub_page_spacebox,sub_apply_spacebox,sub_spacebox_download,company_findById } from "@/request/api";
	import { saveAs } from "file-saver"
    import axios from 'axios'
    export default {
        data() {
            return {
				form:{},
				tableData1:[],
				dialogFormVisible:false,
                activeName: '赋码管理',
                searchName1: '',
                searchName2: '',
                tableData: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                pagesize4:10,
                listUrl: '',
                action: '',
                added:true,
                printing:true,
                activation:true,
                download:true,
                qualified:true,
                preview:true,
				boxNum:'',
                subpackageBatch: '',
            };
        },
        created(){

        },
        mounted(){

           this.init1();
           this.judgmentAuthority();
		   this.init2()
        },
        destroyed: function () {
            // this.$store.commit("setStorName","")
        },
        methods: {
			handleactivate(index,row){
				this.$router.push({
					path:'/tagging/activate',
					query:{list:row}
				})
			},
			downloadSpacebox(index,row){
				// sub_spacebox_download(row.id).then((res)=>{
                    axios.get("http://grove.cpzsyun.com:81/api/plant/sub/spacebox/download/" + row.id+"/"+row.subpackageBatch).then((res) =>{
					var content = res.data;
					var filename = "追溯码.txt";
					var blob = new Blob([content], {
						type: "text/plain;charset=utf-8"
					});
					saveAs(blob, filename)
					this.init2()
				})
			},
			apply(){
				this.dialogFormVisible =true
                this.boxNum = ''
			},
			close(){
				this.dialogFormVisible = false
			},
			save(){
				if(this.boxNum == ""){
					this.$notify({
					    title: '提示',
					    message: '追溯码数量不能为空',
					    type: 'info',
					    duration:1000
					});
				}else{
					let data = {
						boxNum:this.boxNum,
						subpackageBatch: this.subpackageBatch
					}
					// sub_apply_spacebox(data).then((res)=>{
                    axios.post("http://grove.cpzsyun.com:81/api/plant/sub/apply/spacebox",data).then((res) =>{
						this.$notify({
						    title: '提示',
						    message: '申请成功',
						    type: 'success',
						    duration:1000
						});
						this.init2()
					})
					this.dialogFormVisible = false
				}
			},
			init2(){
                var d = new Date();
                var curr_date = d.getDate();
                var curr_month = d.getMonth() + 1;
                var curr_year = d.getFullYear();
                String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
                String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
                var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
                // this.ruleForm.batch = yyyyMMdd + Math.ceil(Math.random()*10000);
                // this.batch = this.ruleForm.batch
                this.subpackageBatch = yyyyMMdd + Math.ceil(Math.random()*10000);
				let data = {
					pagesize:10,
					pageno:this.currentPage2
				}
				// sub_page_spacebox(data).then((res)=>{
                    axios.post("http://grove.cpzsyun.com:81/api/plant/sub/page/spacebox",data).then((res) =>{
					this.tableData1 = res.data.rows
					this.total2 = res.data.total
				})
			},
			handleCertification(index,row){
				this.$router.push({
					path:'/tagging/certification',
					query:{id:row.id}
				})
			},
			handleDownload(index,row){
				var userInfo = JSON.parse(localStorage.getItem("userInfo"))
				var s= userInfo.userInfo
				console.log(s)
				var id = localStorage.getItem("companyId")

				company_findById(id).then((res)=>{

				})
				// sub_findPrintMsg(row.id).then((res)=>{
				// 	let data = {
				// 		"品名":res.data.productName,
				// 		"批号":res.data.batch,
				// 		"净含量":res.data.spec + res.data.specUnits,
				// 		"生产企业":"",
				// 		"产地":"",
				// 		"生产日期":""
				// 	}
				// 	var content="{"
				// 	for(var key in data){
				// 		content+="\""+key+"\":"+"\""+data[key]+"\",";
				// 	}
				// 	content = content.substring(0,content.length-1)+"}";
				// 	let list = {
				// 		subpackageId:row.id,
				// 		content:content,
				// 		num:row.subNumber,
				// 		type:"分包打印"
				// 	}
				// 	sub_offLinePrint(list).then((res)=>{
				// 		var content = res;
				// 		var filename = "追溯码.txt";
				// 		var blob = new Blob([content], {
				// 			type: "text/plain;charset=utf-8"
				// 		});

				// 		saveAs(blob, filename)
				// 	})

				// })
			},
            // 调用接口
            init1(){
				let data = {
					page:this.currentPage1,
					productName:this.searchName1,
					source:'生产分包'
				}
				// sub_findByList(data).then((res)=>{
                    axios.post("http://grove.cpzsyun.com:81/api/plant/sub/findByList",data).then((res) =>{
					this.tableData = res.data.rows
					this.total1 = res.data.total

				})
		    },
            // tabs
            handleClick(tab, event) {

            },
            //
            handleEdit(index,row){

            },
            // 查看
            handleView(index,row){

            },
            // 删除
            handleDelete(index,row){

            },

            // 列表搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },




            // 分页事件
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },

            //判定操作按钮显示
            judgmentAuthority(){
                var type = JSON.parse(localStorage.getItem("panduanzhuangtai"))
                type.map(item1 => {
                    if(item1.name == '赋码管理' && item1.children != null){
                        for(var i = 0; i < item1.children.length; i++){
                            if(item1.children[i].name == '打印') this.printing = false;
                            if(item1.children[i].name == '空码激活') this.activation = false;
                            if(item1.children[i].name == '下载') this.download = false;
                            if(item1.children[i].name == '合格证') this.qualified = false;
                            if(item1.children[i].name == '预览') this.preview = false;
                        }
                    }
                })
            }


        }
    }
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.customWidth{
		width:30%;
	}
.el-col{
    margin-bottom: 0;
}
/* .scopClass .el-table{ margin-top: 20px;} */
 .el-pagination{
    text-align: center;
}
/*
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */
</style>
